<template>
  <div class="channel-edit">
    <van-cell class="channel-title" title="我的频道" :border="false">
      <van-button
        size="mini"
        round
        type="danger"
        plain
        @click="isEdit = !isEdit"
      >{{isEdit ? '完成':'编辑'}}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="grid-item"
        :class="{ active: index === active}"
        :icon="(isEdit && index !== 0) ? 'clear': ''"
        v-for="(channel,index) in userChannels"
        :key="channel.id"
        :text="channel.name"
        @click="onUserChannelClick(index)"
      />
    </van-grid>
    <van-cell class="channel-title" title="频道推荐" :border="false"></van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="recommendChannel in recommendChannels"
        :key="recommendChannel.id"
        :text="recommendChannel.name"
        @click="onAdd(recommendChannel)"
      />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannel, deleteUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'ChannelEdit',
  components: {},
  props: {
    userChannels: {
      type: Array,
      require: true
    },
    active: {
      type: Number,
      require: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false
    }
  },
  computed: {
    ...mapState(['user']),
    recommendChannels () {
      return this.allChannels.filter(channel => {
        return !this.userChannels.find(userChannel => {
          return channel.id === userChannel.id
        })
      })
    }
  },
  watch: {},
  created () {
    this.loadAllchannels()
  },
  mounted () {},
  methods: {
    async loadAllchannels () {
      const { data } = await getAllChannels()
      this.allChannels = data.data.channels
    },
    async onAdd (recommendChannel) {
      this.userChannels.push(recommendChannel)
      // 数据持久化
      if (this.user) {
        await addUserChannel([{
          id: recommendChannel.id, // 频道 id
          seq: this.userChannels.length // 频道的序号
        }])
      } else {
        setItem('user-channels', this.userChannels)
      }
    },
    onUserChannelClick (index) {
      if (this.isEdit && index !== 0) {
        this.deleteChannle(index)
      } else {
        this.swtichChannle(index)
      }
    },
    async deleteChannle (index) {
      try {
        if (this.user) {
          console.log(index)
          console.log(this.userChannels)
          console.log(this.userChannels[index].id)
          console.log(this.userChannels)
          await deleteUserChannel(this.userChannels[index].id)
        } else {
          setItem('user-channels', this.userChannels)
        }
      } catch (error) {
        console.log(error)
        this.$toast('删除频道失败，请稍后重试')
      }
      if (index <= this.active) {
        this.$emit('update-active', this.active - 1)
      }
      this.userChannels.splice(index, 1)
    },
    swtichChannle (index) {
      this.$emit('close')
      this.$emit('update-active', index)
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  padding-top: 54px;
  .channel-title{
    font-size: 16px;
    color: #333;
  }
  .grid-item {
    height: 80px;
    height: 43px;
    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;
      .van-grid-item__text {
        color: #222;
        font-size: 14px;
        margin-top: 0;
      }
    }
    /deep/.van-grid-item__icon{
      position: absolute;
      top: -5px;
      right: -10px;
      font-size: 20px;
      color: #ccc;
  }
  }
  .active {
    /deep/.van-grid-item__text{
      color: red !important;
    }
  }
}
</style>
